<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="()=>{$router.push('/login/a1')}" />
        <van-empty v-if="!cartdata.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="购物车空空如也" />
        <div v-else v-for="item in cartdata">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #thumb>
                        <div class="fxk">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img style="width: 70px;height: 70px;" :src="item.goods.goods_big_logo" alt="">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper style="margin: 10px;" v-model="item.number" theme="round" button-size="22"
                            disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button @click="delcart(item.id)" square text="删除" type="danger" class="delete-button"
                        style="height: 100%;" />
                </template>
            </van-swipe-cell>

            
        </div>
    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
</template>

<script setup>
import { ref,computed } from 'vue';
import { useCounterStore } from '@/stores/cart'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
let cartdata = ref([])

const cart=()=>{
    let username=localStorage.getItem('username')
    cartdata.value=store.carts.filter(item=>item.username==username)
    console.log(cartdata)
}
cart()

const delcart=(id)=>{
    console.log(id)
    store.carts=store.carts.filter(item=>item.id!=id)
    cart()
}

const allprice=computed(()=>{
    let allprice=0
    let cart=cartdata.value.filter(item=>item.checked)
    cart.forEach((item=>{
        allprice+=item.number*item.goods.goods_price
    }))
    return allprice*100
})

const checkedall=computed({
    get(){
        if(cartdata.value.length==0){
            return false;
        }else{
            return cartdata.value.every(item=>item.checked)
        }
    },
    set(val){
        console.log(val)
        cartdata.value.forEach(item=>item.checked=val)
    }
})
import { useRouter } from 'vue-router';
let router=new useRouter()
const onSubmit=()=>{
    router.push('/dd')
}
</script>

<style>
.fxk{
    width: 110px;
    display: flex;
}
</style>